<template>
    <div>
        {{anum}}
        <!-- <TableHeader/>         -->
    </div>
</template>
<script>
import { reactive, computed,watch,ref } from 'vue'
import TableHeader from '../components/TableHeader.vue'
export default {
    components:{
        TableHeader
    },
    setup() {
    //     let  person=  reactive({
    //         firstName: 'li',
    //         lastName: 'jinlong'
    //     })
    //     let fullName = computed(() => {
    //         return person.firstName + person.lastName
    //     })
    //     let fullName2 = computed({
    //         get: () => {
    //             return person.firstName + person.lastName + 2
    //         },
    //         set(val) {
    //             console.log(val)
    //         }
    //     }) 
    //     console.log(fullName2)
    //    setTimeout(() => {

    //     fullName2.value = '123-qwe'
    //    }, 2000)


    let anum = ref(1)
    watch(anum,(newValue,oldValue)=>{
        console.log('新值:',newValue,'旧值：',oldValue)
    })
    setTimeout(()=>{
        anum.value ++
    },2000)
        return {
            // fullName,
            // fullName2,
            anum
        }
    },
}
</script>
<style>

</style>